<template>
    <van-search
  v-model="keyword"
  show-action
  shape="round"
  background="#e4253e"
  placeholder="请输入搜索关键词"
  @search="APISearch"
>
<template #left>
  <div @click="$router.back()" class="fan">返回</div>
</template>
  <!-- <template #action>
    <div @click="onClickButton">搜索</div>
  </template> -->
</van-search>
    <!-- <div v-for="item in hotWord" :key="item">{{item.keyword}}</div> -->
    <!-- <div v-for="item1 in search" :key="item1" class="box">
      <p><img :src="item1.img1" alt=""></p>
      <p>{{item1.proname}}</p>
      <p>￥{{item1.originprice}}</p>
    </div> -->
    <div>
      <van-pull-refresh
      v-model="refreshLoading"
      @refresh="onRefresh"
    >
      <div class="goods-list">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          class="goods-item"
        >
          <van-cell
            v-for="item in search"
            :key="item.proid"
            @click="goToDetail(item.proid)"
          >
            <div class="item-imgbox">
              <img :src="item.img1" alt="" />
            </div>
            <div>
              <p>{{ item.proname }}</p>
              <p>￥{{ item.originprice }}</p>
            </div>
          </van-cell>
        </van-list>
      </div>
    </van-pull-refresh>
    </div>
    

    <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <div>热门搜索</div>
  <van-cell v-for="item in hotWord" :key="item" :title="item.keyword" />
</van-list>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from "vue";
  import type { Ref } from "vue";
  import { useUserInfoStore } from "@/stores/userInfo";
  import { getSearch }  from "@/api/api"
  import { getHotword } from "@/api/api";
  import {
    useProductList,
  } from "@/hooks/HomeViewHook"
  interface ISearch{
    code:string,
    message:string,
    data:any[]
  }
  interface IHotword{
    code:string,
    message:string,
    data:any[]
  }
  const keyword:Ref<string>=ref("")
  const count:Ref<number>=ref(1)
  const limitNum:Ref<number>=ref(10)
  const loading = ref(false);
  const finished = ref(false);
  const hotWord:Ref<any[]>=ref([]);
  const search:Ref<any[]>=ref([]);
  const store = useUserInfoStore();
  const APISearch=async()=>{
    const params={
      count:count.value,
      limitNum:limitNum.value,
      keyword:keyword.value
    }
    const res=(await getSearch(params))as unknown as ISearch;
    if(res.code==="200")
    search.value=res.data
  }
  const APIHotword=async()=>{
    const res=(await getHotword())as unknown as IHotword;
    if(res.code==="200")
    hotWord.value=res.data
  }
  
  onMounted(() => {
    APIHotword();
    // APISearch()
});
const {
    refreshLoading,
    onRefresh,
    goToDetail,
  } = useProductList();
const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          hotWord.value.push(hotWord.value.length + 1);
        }

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (hotWord.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };


  
  </script>
  
  <style lang="scss" scoped>
    .fan{
      color: white;
    }
    .goods-list {
      width: 100%;
      .goods-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%;
        margin: 10px;
        border-radius: 10px;
        margin: 8px 0;
        overflow: hidden;
        // .van-cell {
        //   width: 48%;
        //   margin-top: 10px;
        // }
        .item-imgbox {
          width: 100%;
          img {
            display: block;
            width: 100%;
          }
        }
      
      }
    }

  </style>
  